<template>
    <div class="charts" ref="charts"></div>
  </template>
  
  <script>
    import echarts from "echarts";
    export default {
      computed: {},
      components: {},
      mounted() {
        let option = {
  title: {
    text: 'Proportion of Browsers',
    subtext: 'Fake Data',
    top: 10,
    left: 10,
    show:false
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    show:false,
    type: 'scroll',
    bottom: 10,
    data: (function () {
      var list = [];
      for (var i = 1; i <= 28; i++) {
        list.push(i + 2000 + '');
      }
      return list;
    })()
  },
  visualMap: {
    top: 'middle',
    right: 10,
    color: ['red', 'yellow'],
    calculable: true,
    show:false
  },
  radar: {
    indicator: [
      { text: '农副产品', max: 400 },
      { text: '鲜花', max: 400 },
      { text: '谷物', max: 400 },
      { text: '海鲜', max: 400 },
      { text: '乳畜品', max: 400 }
    ]
  },
  series: (function () {
    var series = [];
    for (var i = 1; i <= 28; i++) {
      series.push({
        type: 'radar',
        symbol: 'none',
        lineStyle: {
          width: 1
        },
        emphasis: {
          areaStyle: {
            color: 'rgba(0,250,0,0.3)'
          }
        },
        data: [
          {
            value: [
              (40 - i) * 10,
              (38 - i) * 4 + 60,
              i * 5 + 10,
              i * 9,
              (i * i) / 2
            ],
            name: i + 2000 + ''
          }
        ]
      });
    }
    return series;
  })()
};
        let lineCharts = echarts.init(this.$refs.charts);
        lineCharts.setOption(option);
      },
    };
  </script>
  
  <style lang="scss" scoped>
  .charts {
    width: 100%;
    height: 100%;
  }
  </style>
  